<template>
  <el-container>
    <el-aside width="180px">
      <!-- <el-row>
        <el-col :span="23">
          <el-input v-model="menuName" @change="filterChange" clearable :placeholder="$t('search')+'功能，回车确定'">
          </el-input>
        </el-col>
      </el-row>
      <el-tree @check="treeCheck" @node-click="menuListTreeNodeclick" :data="menuList" :props="defaultTreeProps" :expand-on-click-node="false" node-key="id" ref="menuListTree" accordion :show-checkbox="false" check-strictly :filter-node-method="filterNode">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <i v-if="data.isImportant === '1'" class="el-icon-star-on" style="color: red"></i>
        </span>
      </el-tree> -->
      <el-card shadow="never" class=" aui-card-list-left">
        <div class="title">
          <span>功能</span>
        </div>
        <div class="search">
          <el-input v-model="menuName" @change="filterChange" clearable :placeholder="$t('search')+'功能，回车确定'"></el-input>
        </div>
        <div class="body uni-scroll">
          <el-tree @check="treeCheck" @node-click="menuListTreeNodeclick" :data="menuList" :props="defaultTreeProps" :expand-on-click-node="false" node-key="id" ref="menuListTree" accordion :show-checkbox="false" check-strictly :filter-node-method="filterNode">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <i v-if="data.isImportant === '1'" class="el-icon-star-on" style="color: red"></i>
            </span>
          </el-tree>
        </div>
      </el-card>
    </el-aside>
    <el-container>
      <el-main>
        <el-card shadow="never" class="aui-card-list-body">
          <!-- <vxe-toolbar :setting="{immediate:true}">
            <template v-slot:buttons>
              <el-button v-if="$hasPermission('sys:user:save')" type="primary" @click="addOrUpdateHandle()">{{
                  $t('add') }}
              </el-button>
              <el-button v-if="$hasPermission('sys:user:delete')" type="danger" @click="deleteHandle()">{{
                  $t('deleteBatch') }}
              </el-button>
            </template>
            <template v-slot:tools>
              <el-button icon="el-icon-refresh" @click="getDataList()" circle></el-button>
              <el-dropdown trigger="click" style="padding-left: 5px;" placement="bottom">
                <el-button icon="el-icon-download" circle>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-bottom" @click.native="exportHandle(true)">导出当前页</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-download" @click.native="exportHandle()">全部导出
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </vxe-toolbar> -->
          <div class="aui-card-list-body-table">
            <vxe-table ref="xTable" :loading="dataListLoading" class="vxe-table-element" auto-resize @select-change="dataListSelectionChangeHandleVex" @select-all="dataListSelectionAllChangeHandleVex" :data="dataList" max-height="auto">
              <vxe-table-column type="index" align="center" width="40"></vxe-table-column>
              <vxe-table-column field="userName" width="120" title="用户名">
              </vxe-table-column>
              <!-- <vxe-table-column field="operaMenuName" width="120" title="功能名称">
          </vxe-table-column> -->
              <vxe-table-column field="operaUrl" title="访问URL">
              </vxe-table-column>
              <vxe-table-column field="operaAction" title="行为" width="120">
                <template slot-scope="scope">
                  {{$getDictLabel('USER_BEHAVIOR_TYPE', scope.row.operaAction)}}
                </template>
              </vxe-table-column>
              <vxe-table-column field="userAgent" title="logOperation.Browser" width="80">
                <template slot-scope="scope">
                  {{ userAgent(scope.row.userAgent).browser }}
                </template>
              </vxe-table-column>
              <vxe-table-column field="userAgent" title="logOperation.OS" width="140">
                <template slot-scope="scope">
                  {{ userAgent(scope.row.userAgent).os }}
                </template>
              </vxe-table-column>

              <vxe-table-column field="ip" width="120" title="操作IP">
              </vxe-table-column>
              <vxe-table-column width="160" field="createDate" title="访问时间">
              </vxe-table-column>
            </vxe-table>
          </div>
          <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
          </el-pagination>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import { isEmpty } from '@/utils/validate'
import { fnUserAgent } from '@/utils/ua'

export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/sys/sysLogUserBehavior/page',
        getDataListIsPage: true,
        exportURL: '/sys/sysLogUserBehavior/export'
      },
      defaultTreeProps: {
        label: 'name',
        children: 'children'
      },
      leftHeightHold: 58 + 12,
      tableHeightHold: 2, // table 高度 页高中不能占用的部分
      menuList: [],
      menuName: '',
      dataForm: {
        operaMenuId: '0'
      }
    }
  },

  watch: {

  },
  created () {
    this.init()
  },
  methods: {
    getMenuIdsInit () {
      return '_NO_DATA_'
    },
    init () {
      this.$nextTick(() => {
        Promise.all([
        ]).then(() => {
          this.getMenuList()
        })
      })
    },
    // 获取菜单列表
    getMenuList () {
      return this.$http.get('/sys/menu/select').then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        this.menuList = res.data
      }).catch(() => { })
    },
    // 树 选中节点
    treeCheck () {
      this.dataForm.menuIds = [
        ...this.$refs.menuListTree.getCheckedKeys(),
        ...this.$refs.menuListTree.getHalfCheckedKeys()
      ].join(',')
      if (isEmpty(this.dataForm.menuIds)) {
        this.dataForm.menuIds = this.getMenuIdsInit()
      }
      this.getDataList()
    },
    menuListTreeNodeclick (val) {
      this.dataForm.operaMenuId = val.id
      this.getDataList()
    },
    filterNode: function (value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    filterChange: function () {
      // 这里每当输入的数据有变化就触发原生的过滤节点这个函数
      this.$refs.menuListTree.filter(this.menuName)
    },
    // 识别设备
    userAgent (userAgent) {
      return fnUserAgent(userAgent)
    }
  }
}
</script>
<style lang="scss" >
.el-tag--mini {
  margin: 0 2px;
  padding: 0 2px;
  font-size: 10px;
  height: 18px;
  line-height: 18px;
}
.el-card__body {
  .el-main {
    .el-card {
      border: 0px solid #ebeef5;
      .el-card__body {
        padding: 0px;
      }
    }
  }
}
</style>
